번역 도 참조하라.
저작권 © 2024 월드 와이드 웹 컨소시엄 . W3C ® 책임 , 상표 및 허용되는 문서 라이센스 규칙이 적용됩니다.
이 사양은 [ HTML ] 요소 에 WAI-ARIA(Accessible Rich Internet Application) 1.2 및 Digital Publishing WAI-ARIA 모듈 1.0 속성을 사용하기 위한 저작 규칙(저작자 준수 요구 사항)을 정의합니다 . 이 사양의 주요 목적은 저작자(즉, 웹 개발자)가 사용하는 준수 검사 도구와 함께 사용하기 위한 요구 사항을 정의하는 것입니다. 이러한 요구 사항은 저작자가 호스트 언어( HTML ) 의 기능을 보완하거나 확장하기 위해 ARIA를 활용하는 사용자 정의 인터페이스 및 위젯을 포함한 웹 콘텐츠를 개발하는 데 도움이 됩니다 .
이 섹션에서는 발행 당시 이 문서의 상태를 설명합니다. 현재 W3C 간행물 목록 과 이 기술 보고서의 최신 개정판은 W3C 기술 보고서 색인( https://www.w3.org/TR/)에서 확인할 수 있습니다.
HTML의 ARIA는 [ HTML ] 사양 모듈입니다. 이 사양 모듈에서 참조하지만 명시적으로 정의하지 않은 모든 HTML 기능, 준수 요구 사항 또는 용어는 HTML 표준 에 의해 정의됩니다.
이 사양은 2021년 12월 9일에 W3C 권장 사항이 되었기 때문에 다음과 같은 실질적인 추가 및/또는 수정 사항이 제안되었습니다.
separator 역할을 허용하도록 버튼 요소 및 input type=button,image,reset,submit 요소 업데이트
img 요소 허용 업데이트
group 역할에 대한 업데이트된 매핑에 따라 address 및 hgroup 요소 허용 업데이트
doc-glossary 역할을 허용하도록 aside 요소 업데이트
button, input type=button, input type=image, input type=reset, input type=submit 요소를 업데이트하여 허용된 역할 정리
role=deletion 사용이 중복된 것으로 간주됨을 나타내기 위해 s 요소 허용 역할 업데이트
summary 요소에서 허용되는 aria-* 속성 및 역할을 조건부 수정
li 목록 요소 부모에 대한 요소의 상위 관계 또는 부족에 대한 맥락에서 요소 역할 허용 업데이트
search 요소 추가
body에 aria-hidden=true 요소 불허
doc-example를 포함하도록 figure 요소 역할 허용 업데이트
datalist 요소에 역할 및 aria-* 속성 불허
aria-checked는 checked 속성 을 지원하는 요소에는 사용 안함
nav 요소에 대한 none 및 presentation 역할 허용
dl 요소의 하위인 경우 div요소에 대한 역할 허용 제한
button 요소에 combobox 역할 허용. input type=button 요소에 combobox 및 checkbox 역할 허용
li 요소에 대한 doc-biblioentry및 doc-endnote 역할 허용 변경. 이 역할은 Digital Publishing WAI-ARIA Module 1.1에서 더 이상 사용되지 않음
img alt="some text" element에 radio 역할 허용
wbr 요소에 대한 역할 none과 presentation만 허용.
br 및 wbr 요소에 대해 aria-hidden 전역 속성만 허용
section element에 group 역할 허용
href 없는 area 요소에 link및 button 역할 허용.
picture 요소에 aria-hidden 속성 허용
문서 검토자는 문서의 고유한 스타일을 통해 후보 추가 및/또는 수정 사항을 식별할 수 있습니다.
수정 후보는 문서에 표시됩니다.
추가 후보는 문서에 표시됩니다.
이 문서는 권고안 트랙(Recommendation track)을 사용하여 웹 애플리케이션 작업 그룹(Web Applications Working Group)에서 권고안으로 게시되었습니다. 여기에는 이전 권고안 이후 실질적인 변경 사항과 새로운 기능을 도입하는 수정안 후보(candidate amendments)가 포함됩니다.
W3C는 이 사양을 웹 표준으로 광범위하게 배포할 것을 권장합니다.
W3C 권장 사항은 광범위한 합의 구축 후 W3C 와 회원이 승인하고 실무 그룹 회원이 구현을 위해 로열티 없는 라이센스를 약속하는 사양 입니다 . 이 권고안에 대한 향후 업데이트에는 새로운 기능이 포함될 수 있습니다.
추가 후보는 문서에 표시됩니다.
수정 후보는 문서에 표시됩니다.
이 문서는 W3C 특허 정책에 따라 운영되는 그룹에 의해 작성되었습니다. W3C는 그룹의 결과물과 관련하여 공개된 모든 특허 공개 목록을 유지 관리합니다. 해당 페이지에는 특허 공개에 대한 지침도 포함되어 있습니다. 필수 주장이 포함되어 있다고 생각하는 특허에 대한 실제 지식을 갖고 있는 개인은 W3C 특허 정책 의 섹션 6에 따라 정보를 공개해야 합니다.
이 문서는 2023년 11월 3일 W3C 프로세스 문서의 적용을 받습니다.
이 섹션은 비표준입니다.
ARIA를 사용하면 작성자는 기본 HTML의 현재 기능을 넘어서는 의미 체계를 지정할 수 있습니다. 이는 작성자에게 위젯을 만들 수 있는 기회를 제공하거나 HTML만 사용해서는 불가능한 기본 HTML 기능에 특정 액세스 가능한 상태 및 속성을 노출할 수 있는 기회를 제공하므로 매우 유용할 수 있습니다.
예를 들어, button 요소에는 "누름" 상태를 노출하는 기본 HTML 기능이 없습니다. ARIA를 사용하면 작성자는 속성을 지정하여 요소의 의미를 확장할 수 있으므로 aria-pressed 컨트롤의 시각적 표현과 일치하는 청각적 UI가 가능해집니다.
다음 예에서는 button 요소를 통해 사용자가 웹 애플리케이션 내 설정 상태를 전환할 수 있습니다. aria-pressed 속성은 button 요소를 보강하는 데 사용됩니다. "눌린" 상태에서는 정보가 보조 기술 사용자에게 노출될 수 있습니다.
<button aria-pressed=true>...</button>
특정 aria-* 속성이 특정 role과 함께 요소에 사용되도록 허용되는 상황도 있지만, 이에 상응하는 기본 속성은 현재 HTML 자체에서는 유효하지 않습니다.
예를 들어 HTML에는 비활성화된 하이퍼링크(a href 요소)에 대한 직접적인 개념이 없습니다. <a href="..." disabled> ... </a>와 같은 구문은 유효하지 않으며 보조 기술로 전달되지 않습니다.
ARIA는 HTML과 달리 명시적인 role=link로 지정된 요소에 aria-disabled 속성을 지정할 수 있습니다. 저작자가 aria-disabled=true 하이퍼링크에 을 지정하는 경우 사용자 에이전트는 하이퍼링크를 기능적으로 다르게 처리하지 않지만(여전히 클릭 가능/작동 가능) 보조 기술에는 비활성화된 상태로 노출됩니다.
마찬가지로 select 요소의 자손인 기본 HTML option 요소는 selected로만 설정될 수 있지만, 명시적 option 역할을 가진 요소는 aria-selected와 동등한 역할뿐만 아니라 aria-checked 속성도 허용할 수 있습니다. 이를 통해 기본 select 요소의 기능을 넘어서는 위젯/구조를 지원할 수 있습니다.
불행하게도 ARIA와 HTML이 기능 동등성을 갖고 있지만 허용 범위가 다른 상황에서는 사용자 경험은 아니더라도 지원에 불일치가 발생할 수 있습니다. ARIA가 HTML에서 지원하지 않는 기능을 허용하는 상황에서는 완전한 사용자 정의 ARIA 위젯으로 구현하는 것이 작성자와 궁극적으로 사용자에게 가장 큰 이익이 되는 경우가 많습니다.
다음 예에서는 하이퍼링크가 비활성화된 상태로 전달되어야 합니다. HTML은 하이퍼링크에서 disabled 속성 사용을 허용하지 않으며, aria-disabled=true을 사용하면 보조 기술에 하이퍼링크가 비활성화된 것으로 전달되지만 실제로 요소가 비활성화되지는 않습니다. 하이퍼링크를 전달하고 실제로 비활성화하는 가장 효과적인 방법은 a 요소에서 href을 제거하여 플레이스홀더를 만드는 것입니다. 그런 다음 ARIA를 이 플레이스홀더 링크에 적용하여 요소의 의도된 역할과 상태를 전달할 수 있습니다.
<a role=link aria-disabled=true>...</a>
이 섹션은 비표준입니다.
ARIA는 사용자에게 노출시키기 위해 다른 역할이 필요할 때 요소의 역할을 수정하거나 수정하는 데 유용합니다. 그러나 상호작용 요소(예: button)의 역할을 일반적으로 비상호작용 요소(예: 헤딩)에 의해 노출되는 역할로 대체하려고 ARIA를 사용하는 것은 사용자나 작성자 모두에게 이롭지 않습니다. 이는 바람직하지 않습니다. ARIA는 본래의 용도대로 사용하는 것이 가장 좋습니다.
예를 들어 다음은 button 요소에 role=heading을 사용합니다 . 이는 button 요소에 제목 역할에 대한 사용자 기대와 충돌하는 기본 기능이 있기 때문에 허용되지 않습니다.
<button role="heading">search</button>
저작자는 button의 기본 기능과 표시가 제거되었는지 확인하기 위해 추가 조치를 취해야 하며, 그렇게 해도 사용자가 웹 페이지에 참여하기로 선택한 방식에 따라 요소의 암묵적 기능을 완전히 억제하는 데 충분하지 않을 수 있습니다. 예를 들어 Windows 고대비 테마를 켜거나 브라우저의 리더 모드에서 웹 페이지를 보는 것입니다.
다음 예시는 role=button이 명시적으로 제공된 button 요소를 보여줍니다. 이 역할을 지정하는 것은 불필요합니다. 왜냐하면 "button" 요소는 이미 암묵적 button 역할로 노출되기 때문입니다. 실제로 이런 중복은 마크업을 불필요하게 길게 만들고 다른 작성자들에게 이 관행이 유용하다는 잘못된 신호를 주는 것 외에는 예기치 않은 부작용이 없을 것입니다. 불필요한 역할 지정이 문제가 될 수 있는 예시는 3.3 부작용에 주의하세요를 참고하시기 바랍니다.
<!-- Avoid doing this! -->
<button role="button">...</button>
마찬가지로 다음 예시에서는 fieldset 요소에 role=group을, main 요소에 role=Main을 사용하고 있습니다. 이는 불필요합니다. 왜냐하면 fieldset 요소는 암묵적으로 role=group으로 노출되고, main 요소 또한 암묵적으로 role=main으로 노출되기 때문입니다. 다시 말해, role 값의 선언이 ASCII 소문자를 사용하는 한 보조 기술 사용자에게 예기치 않은 부작용은 없을 것입니다. 자세한 내용은 4.4 ARIA 역할, 상태 및 속성 특성의 대소문자 요구 사항을 참고하세요.
<!-- Avoid doing this! -->
<fieldset role="group">...</fieldset>
<!-- or this! -->
<main role="Main">...</main>
다음은 ul요소에 role=list를 사용합니다. ul 요소에는 암묵적 list 역할이 있으므로 명시적으로 역할을 추가하는 것은 일반적으로 중복되는 것으로 간주됩니다. 그러나 일부 사용자 에이전트는 목록 항목의 시각적 표현에서 목록 마커가 제거되면 목록의 암시적 ARIA 의미 체계를 억제합니다. 일반적으로 요소의 암시적 역할을 중복적으로 선언하는 것은 권장되지 않지만, 이와 같은 특정 상황에서 역할을 노출해야 하는 경우 작성자는 역할을 명시적으로 추가할 수 있습니다.
<!-- Generally avoid doing this! -->
<ul role="list">...</ul>
다음은 요소 summary에 role=button을 사용합니다 . 이는 불필요하며 플랫폼 간 문제가 발생할 수 있습니다. 예를 들어, 요소가 해당 상태를 올바르게 노출하지 못하도록 방지하고 플랫폼이나 브라우저 특정 역할로 노출될 수 있는 경우 button 역할을 강제합니다.
<details>
<!-- Avoid doing this! -->
<summary role="button">more information</summary>
...
</details>
WAI-ARIA(Accessible Rich Internet Application) 1.2에서는 저작자가 사용하지 않아야 하는 여러 역할을 정의하고 있습니다. 이러한 역할 중 많은 수가 추상적 역할로 분류되어 있으며, 저작자가 사용해서는 안 된다고 명시적으로 언급되어 있습니다. 다음 예시는 추상 select 역할의 잘못된 사용을 보여주고 있습니다. 저작자는 combobox 역할을 사용하려고 했을 것입니다.
<!-- Do not do this! -->
<div role="select" ...>...</div>
ARIA는 또한 generic role 역할을 정의하고 있는데, 이는 HTML 요소 중 보다 구체적인 ARIA 의미론이 없는 요소들(예: div span 등)과의 기능 동등성을 제공하기 위한 것입니다. ARIA에서는 generic 역할의 용도가 사용자 에이전트 구현자를 위한 것이므로 저작자가 이를 사용하지 말 것을 권장하고 있습니다.
다음 예시에서 작성자는 generic 역할인 article 요소 대신 div를 사용하는 것이 좋습니다. 만약 HTML 요소를 변경하기 어렵다면, article의 암묵적 역할을 제거하기 위해 presentation 또는 none 역할을 지정하는 것도 허용되는 대안입니다.
<!-- Avoid doing this! -->
<article role="generic" ...>...</article>
Additionally, ARIA specifically mentions in Conflicts with Host Language Semantics that if authors use both native HTML features for exposing states and properties as well as their ARIA counterparts, then the host language features take priority over the explicit ARIA attributes that are also used.
For instance, in the following example an author is using HTML's input type=checkbox and has specified an aria-checked=true. However,
user agents are meant to ignore the aria-checked attribute. Instead user agents would expose the state based on the native features
of the form control.
<!-- Do not do this! -->
<input type="checkbox" checked aria-checked="false">
While ARIA can be used to alter the way HTML features are exposed to users of assistive technologies, these modifications do not change the underlying parsing and allowed content models of HTML. For instance, a div allows an author to specify any role on it. However, this does not mean that the element can then be used in a way that deviates from the rules HTML has defined for the element.
For instance, in the following example an author has specified a role of link on a div element. While
HTML allows for a hyperlink (exposed as a role=link) to be a descendant of a p element, the HTML parser does not
allow a div to be a descendant of a p element.
<!-- Do not do this! -->
<p>
... <div role=link tabindex=0>...</div> ...
</p>
The HTML parser will modify the above markup to be output as the following:
<!-- The previous example's markup will render as follows -->
<p>...</p>
<div role=link tabindex=0>...</div>
...
<p>
</p>
<!-- Instead of a div, use a span. Spans are allowed descendants of p elements! -->
<p>
... <span role=link tabindex=0>...</span> ...
</p>
While this specification indicates the allowed ARIA attributes that can be specified on each HTML element, this example illustrates that even if a role is allowed, the context in which it is used can still result in potential rendering and accessibility issues.
The following table provides normative per-element document conformance requirements for the use of ARIA markup in HTML documents. Additionally, it identifies the implicit ARIA semantics that apply to HTML elements. The implicit ARIA semantics of these elements are defined in HTML AAM.
Each language feature (element) in a cell in the first column implies the ARIA semantics
(role, states, and properties) given in the cell in the second column of the same row.
The third cell in each row defines the ARIA role values and aria-* attributes which authors MAY specify
on the element. Where a cell in the third column includes the term Any role it indicates that any role value MAY be used on the element. However, it is NOT RECOMMENDED for authors to specify the implicit role of the element, the generic role, or a role deprecated by ARIA on these elements. If a cell in the third column includes the term No role it indicates that authors MUST NOT overwrite the implicit ARIA semantics, or native semantics of the HTML element.
WAI-ARIA identifies roles which have prohibited states and properties. These roles do not allow certain WAI-ARIA attributes to be specified by authors. HTML elements which expose these implicit WAI-ARIA roles also prohibit authors from specifying these WAI-ARIA attributes.
Elements which are identified as Naming prohibited are those which authors MUST NOT specify an
aria-label or aria-labelledby attribute, unless the element allows for its implicit role to be overwritten
by an explicit WAI-ARIA role which allows naming from authors. For more information see 4.1 Requirements for use of ARIA attributes to name elements.
While setting an ARIA role and/or aria-* attribute that matches the implicit ARIA semantics is NOT RECOMMENDED, in some situations explicitly setting these attributes can be helpful – for instance, for user agents that do not expose implicit ARIA semantics for certain elements.
While it is conforming to use
Digital Publishing WAI-ARIA Module 1.0
role values as outlined in the following table, the current support for
exposing the semantics of these values to users of assistive technology is close to non-existent.
| HTML 요소 |
암묵적 ARIA 의미 |
ARIA 역할, 상태 및 속성 허용 |
|---|---|---|
href가 있는
a
|
role=link
|
역할:
DPub 역할:
전역
참고
링크를 프로그래밍 방식으로 "비활성화"로 전달해야 하는 경우
href 속성을 제거하세요 .
|
href가 없는
a
|
role=generic
|
모든
그 외에는 전역 |
abbr
|
해당 역할 없음 |
그렇지 않은 경우에는 전역 |
address
|
role=group
|
Any 는
그렇지 않은 경우에는 전역 |
area
~와 함께
href
|
role=link
|
전역 |
area
없이
href
|
role=generic
|
역할:
또는 . ( 또한 허용되지만 사용 해서는 안 됩니다 .)
그렇지 않은 경우에는 전역 |
article
|
role=article
|
역할
: ,
,
,
,
또는
. ( 또한 허용되지만 권장되지는 않습니다 .)
전역 |
aside
|
role=complementary
|
역할
: ,
,
,
또는
. ( 또한 허용되지만 권장되지는 않습니다 .)
DPub
역할:
,
,
,
또는
전역 |
audio
|
해당 역할 없음 |
역할:
전역 |
| 자율적인 맞춤 요소 |
정의된 작성자로부터 노출된 역할
그렇지 않으면 |
그렇지 않으면 any 를 사용해서는 안 되지만, 사용 해서는 안 됩니다 .
역할 로 노출되거나
그렇지 않은 경우에는 전역 |
b
|
role=generic
|
Any 는
그렇지 않은 경우에는 전역 |
base
|
해당 역할 없음 |
아니요 |
bdi
|
role=generic
|
Any 는
그렇지 않은 경우에는 전역 |
bdo
|
role=generic
|
Any 는
그렇지 않은 경우에는 전역 |
blockquote
|
role=
|
그러나
전역 |
body
|
role=generic
|
그렇지 않으면 작성자가 요소 에 지정 해서는 안 된다는 점을 제외하고 역할
에 전역 |
br
|
해당 역할 없음 |
역할:
또는
작성자는 요소 에 속성을 지정할 수 있습니다 . 그렇지 않으면 다른 속성이 허용되지 않습니다 .
|
button
|
role=button
|
역할:
,
,
,
,
,
,
,
,
,
,
,
,
또는 . ( 또한 허용되지만 권장되지는 않습니다 .)
전역 |
canvas
|
해당 역할 없음 |
전역 |
caption
|
role=
|
그렇지 않으면 전역 |
cite
|
해당 역할 없음 |
그렇지 않은 경우에는 전역 |
code
|
role=
|
그렇지 않은 경우에는 전역 |
col
|
해당 역할 없음 |
아니요 |
colgroup
|
해당 역할 없음 |
아니요 |
data
|
role=generic
|
Any 는
그렇지 않은 경우에는 전역 |
datalist
|
role=listbox
|
|
dd
|
해당 역할 없음 |
전역 |
del
|
role=
|
그렇지 않은 경우에는 전역 |
details
|
role=group
|
전역 |
dfn
|
role=term
|
전역 |
dialog
|
role=dialog
|
역할:
. ( 또한 허용되지만 권장되지는 않습니다 .)
전역 |
div
|
role=generic
|
요소
의 직계 하위 요소인 경우
또는 . 그렇지 않으면
any 를 사용해서는 안 되지만, 사용 해서는 안 됩니다 .
그렇지 않은 경우에는 전역 |
dl
|
해당 역할 없음 |
역할
: ,
또는
전역 |
dt
|
해당 역할 없음 |
역할:
전역 |
em
|
role=
|
그렇지 않은 경우에는 전역 |
embed
|
해당 역할 없음 |
역할
:
,
,
또는
.
전역 |
fieldset
|
role=group
|
역할:
,
또는 . ( 또한 허용되지만 권장되지는 않습니다 .)
전역 |
figcaption
|
해당 역할 없음 |
역할
:
또는
그렇지 않은 경우에는 전역 |
figure
|
role=figure
|
그렇지 않으면 허용되지만 권장되지는 않습니다 .
전역 |
footer
|
그렇지 않으면, |
역할:
,
또는 . ( , , 또는 요소 의 하위 항목이 아니거나 , , 또는 가 포함된 요소인 경우 에도 허용
되지만 RECOMMENDED 는 아닙니다
. 그렇지
않은 경우에도
허용되지만 사용해서는 안 됩니다 .)
DPub 역할:
로 노출되면 명명이 금지됩니다
그렇지 않은 경우에는 전역 |
form
|
|
역할:
,
또는 . ( 또한 허용되지만 권장되지는 않습니다 .)
전역
메모
A는 접근 가능한 이름 |
| 양식 관련 맞춤 요소 |
정의된 작성자로부터 노출된 역할
그렇지 않으면 |
그렇지
않은 경우 양식 관련 역할:
,
,
,
,
,
,
,
,
,
,
또는
. ( 또한 허용되지만 사용 해서는 안 됩니다 .)
역할 로 노출되는 경우 이름 지정이 금지됩니다
그렇지 않은 경우에는 전역 |
h1 to h6
|
role=heading
,
aria-level= 요소의 태그 이름에 있는 숫자
|
역할:
,
또는 . ( 또한 허용되지만 권장되지는 않습니다 .)
DPub 역할:
전역 |
head
|
해당 역할 없음 |
아니요 |
header
|
그렇지 않으면, |
역할:
,
또는 . ( , , 또는 요소 의 하위 항목이 아니거나 , , 또는 가 포함된 요소인 경우 에도 허용
되지만 RECOMMENDED 는 아닙니다
. 그렇지
않은 경우에도
허용되지만 사용해서는 안 됩니다 .)
로 노출되면 명명이 금지됩니다
그렇지 않은 경우에는 전역 |
hgroup
|
role=group
|
Any 는
그렇지 않은 경우에는 전역 |
hr
|
role=separator
|
역할:
또는 . ( 또한 허용되지만 권장되지는 않습니다 .)
DPub 역할:
전역 |
html
|
role=document
|
|
i
|
role=generic
|
Any 는
그렇지 않은 경우에는 전역 |
iframe
|
해당 역할 없음 |
역할
:
,
,
또는
.
전역 |
img
접근 가능한 이름으로.
|
img비어 있지 않은 ( )
이름이 있거나 액세스 가능한 이름이 있는 경우 다른 이름 지정 방법이 제공됩니다
.
alt
alt="some text"
imgrole=img
|
역할
: ,
,
,
,
,
,
,
,
,
,
,
,
,
또는
.
( 또한 허용되지만 권장되지는 않습니다 .)
DPub 역할:
전역 |
img
접근 가능한 이름이 없습니다.
|
속성이나 액세스 가능한 이름이
|
|
input type=button
|
role=button
|
역할:
, , , ,
,
,
,
,
,
,
, ,
또는 . ( 또한 허용되지만 권장되지는 않습니다 .)
전역 |
input type=checkbox
|
role=checkbox
|
역할:
,
또는 ;
와 함께 사용하는 경우 . ( 또한 허용되지만 권장되지는 않습니다 .)
작성자는 요소 에 속성을 사용해서는 안 됩니다 .
그렇지 않으면 모든 전역
메모
에 대한 속성 또는 에 사용될 때 역할
대신 HTML 속성을 사용할 수
있습니다 .
|
input type=color
|
해당 역할 없음 |
전역 |
input type=date
|
해당 역할 없음 |
전역 |
input type=datetime-local
|
해당 역할 없음 |
전역 |
input type=email
속성이
없는
list
|
role=textbox
|
전역 |
input type=file
|
해당 역할 없음 |
전역 |
| 해당 역할 없음 |
아니요 |
|
input type=image
|
role=button
|
다음 역할은 허용되지만 권장
되지는
않습니다 :
,
,
,
,
,
,
,
,
,
,
또는
.
전역
가능하다면 작성자는 요소 와 같이 지정된 역할을 허용하는 다른 HTML 요소의 사용을 고려해야 합니다 |
input type=month
|
해당 역할 없음 |
전역 |
input type=number
|
role=spinbutton
|
전역 |
input type=password
|
해당 역할 없음 |
전역 |
input type=radio
|
role=radio
|
역할:
. ( 또한 허용되지만 권장되지는 않습니다 .)
작성자는 요소 에 속성을 사용해서는
안 됩니다 .
그렇지 않으면 모든 전역
메모
에서 역할 에 대한 속성 대신
HTML 속성을 사용할 수 있습니다 .
|
input type=range
|
role=slider
|
작성자는 에서 또는
속성을 사용해서는 안 됩니다 .
그렇지 않은 경우
전역 |
input type=reset
|
role=button
|
|
input type=search
, 속성
없음
list
|
role=searchbox
|
전역 |
input type=submit
|
role=button
|
|
input type=tel
, 속성
없음
list
|
role=textbox
|
전역 |
input type=text
또는 속성이
없거나 누락되었거나 유효하지 type않음
list
|
role=textbox
|
역할:
,
또는 . ( 또한 허용되지만 권장되지는 않습니다 .)
전역 |
input type=text
,
search
,
tel
,
url
,
email
, 또는 속성 이 누락되었거나 유효하지 않은 type경우
list
|
role=combobox
|
작성자는 표시된 s의 속성을 속성과 함께 사용해서는 안 됩니다 .
그렇지 않은 경우
전역 |
input type=time
|
해당 역할 없음 |
전역 |
input type=url
속성이
없는
list
|
role=textbox
|
전역 |
input type=week
|
해당 역할 없음 |
전역 |
ins
|
role=
|
그렇지 않은 경우에는 전역 |
kbd
|
해당 역할 없음 |
그렇지 않은 경우에는 전역 |
label
|
해당 역할 없음 |
그렇지 않으면 전역 |
legend
|
해당 역할 없음 |
그렇지 않으면 전역 |
li
|
그렇지 않고 |
그렇지 않으면 상위 목록 요소가 암시적 또는 명시적 역할을 노출하지 않는 경우 모두 입니다 .
전역 작성자는 다음과 같은 더 이상 사용되지 않는 DPub 역할을
사용해서는 안 됩니다 : ,
.
|
link
|
해당 역할 없음 |
아니요 |
main
|
role=main
|
전역 |
map
|
해당 역할 없음 |
아니요 |
mark
|
해당 역할 없음 |
그렇지 않은 경우에는 전역 |
math
|
role=math
|
전역 |
menu
|
role=list
|
역할
: ,
,
,
,
,
,
,
또는
. ( 또한 허용되지만 권장되지는 않습니다 .)
전역 작성자는 더 이상 사용되지 않는 역할을 사용해서는 안 됩니다 .
|
meta
|
해당 역할 없음 |
아니요 |
meter
|
role=
|
작성자는 요소 에 또는
속성을 사용해서는 안 됩니다 .
그렇지 않은 경우
전역 |
nav
|
role=navigation
|
역할
: ,
,
또는
. ( 또한 허용되지만 권장되지는 않습니다 .)
DPub 역할
:
또는
전역 |
noscript
|
해당 역할 없음 |
아니요 |
object
|
해당 역할 없음 |
역할:
,
또는 .
전역 |
ol
|
role=list
|
역할
: ,
,
,
,
,
,
,
또는
. ( 또한 허용되지만 권장되지는 않습니다 .)
전역 작성자는 더 이상 사용되지 않는 역할을 사용해서는 안 됩니다 .
|
optgroup
|
role=group
|
전역 |
option
에 있는 요소옵션 목록또는
datalist
|
role=option
|
작성자는 요소 에 속성을 사용해서는 안 됩니다 .
전역 |
output
|
role=status
|
전역 |
p
|
role=
|
그렇지 않은 경우에는 전역 |
param
|
해당 역할 없음 |
아니요 |
picture
|
해당 역할 없음 |
작성자는 요소 에 속성을 지정할 수 있습니다 . 그렇지 않으면 다른 속성이 허용되지 않습니다 .
|
pre
|
role=generic
|
Any 는
그렇지 않은 경우에는 전역 |
progress
|
role=progressbar
|
작성자는 요소 에 속성을 사용해서는 안 됩니다 .
그렇지 않은 경우 전역 |
q
|
role=generic
|
Any 는
그렇지 않은 경우에는 전역 |
rp
|
해당 역할 없음 |
전역 |
rt
|
해당 역할 없음 |
그렇지 않은 경우에는 전역 |
ruby
|
해당 역할 없음 |
전역 |
s
|
role=
|
그렇지 않은 경우에는 전역 |
samp
|
role=generic
|
Any 는
그렇지 않은 경우에는 전역 |
script
|
해당 역할 없음 |
아니요 |
search
|
|
역할
: ,
,
또는
.
( 또한 허용되지만 권장되지는 않습니다 .)
전역 |
section
|
그렇지 않으면, |
역할
: ,
,
,
,
,
,
,
,
,
, ,
,
,
,
,
,
또는
.
(
DPub 역할
:
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
전역 |
select
(NO multiple속성 및 NO size
속성의 값이 보다 큰 경우 1)
|
role=combobox
|
역할: . ( 또한 허용되지만 권장되지는 않습니다 .)
작성자는 요소 에 속성을 사용해서는 안 됩니다 .
그렇지 않은 경우에는 전역 |
select
( multiple속성 또는 size값이 보다 큰 속성 포함 1)
|
role=listbox
|
작성자는 요소 에 속성을 사용해서는 안 됩니다 .
그렇지 않은 경우 전역 |
slot
|
해당 역할 없음 |
아니요 |
small
|
role=generic
|
Any 는
그렇지 않은 경우에는 전역 |
source
|
해당 역할 없음 |
아니요 |
span
|
role=generic
|
Any 는
그렇지 않은 경우에는 전역 |
strong
|
role=
|
그렇지 않은 경우에는 전역 |
style
|
해당 역할 없음 |
아니요 |
sub
|
role=
|
그렇지 않은 경우에는 전역 |
summary
|
메모
전부는 아니지만 많은 사용자 에이전트가
summary암시적 ARIA 를 사용하여 요소를
노출합니다 .
role=button
|
전역
그렇지 않으면 작성자는 Any ,
전역 속성
및 허용된 역할에 적용 가능한 속성을
지정할 수 있습니다 .
|
sup
|
role=superscript
|
그러나
그렇지 않은 경우에는 전역 |
SVG
|
role=graphics-documentSVG AAM 에서 정의한 대로
|
그러나
전역 |
table
|
role=table
|
전역 |
tbody
|
role=rowgroup
|
전역 |
td
|
상위 요소가 , 또는 |
조상
그렇지 않으면 상위 요소가 , 또는 ,
any
전역 |
template
|
해당 역할 없음 |
아니요 |
textarea
|
role=textbox
|
전역 |
tfoot
|
role=rowgroup
|
전역 |
th
|
상위 요소가 , 또는 |
조상
그렇지 않으면 상위 요소가 , 또는 ,
any
전역 |
thead
|
role=rowgroup
|
전역 |
time
|
role=time
|
그렇지 않은 경우에는 전역 |
title
|
해당 역할 없음 |
아니요 |
tr
|
role=row
|
조상
전역 |
track
|
해당 역할 없음 |
아니요 |
u
|
role=generic
|
Any 는
그렇지 않은 경우에는 전역 |
ul
|
role=list
|
역할
: ,
,
,
,
,
,
,
또는
. ( 또한 허용되지만 권장되지는 않습니다 .)
전역 |
var
|
해당 역할 없음 |
그렇지 않은 경우에는 전역 |
video
|
해당 역할 없음 |
역할:
전역 |
wbr
|
해당 역할 없음 |
역할:
또는
작성자는 요소 에 속성을 지정할 수 있습니다 . 그렇지 않으면 다른 속성이 허용되지 않습니다 .
|
The elements marked with No corresponding role, in the second column of
the table do not have any implicit ARIA semantics, but they do have meaning
and this meaning may be represented in roles, states and properties not provided
by ARIA, and exposed to users of assistive technology via accessibility APIs.
It is therefore recommended that authors add a role attribute to a semantically
neutral element such as a
div
or
span
, rather than overriding the semantics
of the listed elements.
Authors are encouraged to make use of the following documents for guidance on using ARIA in HTML beyond that which is provided here:
Authors MAY use
aria-label
and
aria-labelledby
attributes to specify accessible names for elements which have an implicit or explicit ARIA role which allows naming from authors.
Accessible Rich Internet Applications (WAI-ARIA) 1.2
defines roles which allow naming from authors as well as roles where author naming is prohibited.
Authors MUST NOT specify aria-label or aria-labelledby on elements with implicit WAI-ARIA roles which cannot be named. HTML elements whose implicit WAI-ARIA roles prohibit naming from authors are identified in
4.
Document conformance requirements for use of ARIA attributes in HTML.
The following markup example demonstrates a selection of HTML elements with implicit ARIA roles that prohibit naming from authors.
<!-- DO NOT do the following! -->
<p aria-label="...">...</p>
<span aria-label="...">...<span>
<code aria-label="...">...<code>
<div aria-labelledby="...">...</div>
The following markup example demonstrates elements which have explicit WAI-ARIA roles which allow naming from authors. Due to the explicit roles specified on these elements, aria-label and aria-labelledby attributes are allowed.
<p role="link" tabindex="0" aria-label="...">...</p>
<span role="button" tabindex="0" aria-label="...">...<span>
<div role="article" aria-labelledby="...">...</div>
Unless otherwise stated, authors MAY use aria-* attributes in place of their HTML equivalents on HTML elements where the aria-* semantics would
be expected. For example, authors MAY specify aria-disabled=true on a
button
element, while also implementing the necessary scripting to functionally
disable the button, rather than the use disabled attribute.
As stated in WAI-ARIA's Conflicts with Host Language Semantics,
when HTML elements use both aria-* attributes and their host language (HTML) equivalents, user agents MUST ignore the WAI-ARIA attributes – the
native HTML attributes with the same implicit ARIA semantics take precedence. For this reason, authors SHOULD NOT specify both the native HTML attribute
and the equivalent aria-* attribute on an element. Please review each attribute for any further author specific requirements.
The following table represents HTML elements and their attributes which have aria-* attribute parity.
Each language feature (element and attribute) in a cell in the first
column implies the ARIA semantics (states, and properties) given in
the cell in the second column of the same row. The third cell in each
row defines how authors can use the native HTML feature, along with
requirements for using the aria-* attributes that supply the same
implicit ARIA semantics.
| HTML feature |
Implicit ARIA semantics |
HTML feature and aria-* attribute author guidance
|
|---|---|---|
Any element where the
checked
attribute is allowed
|
aria-checked="true"
|
Use the
Authors MUST NOT use the
Authors MAY use the |
Any element where the
disabled
attribute is allowed, including
option
disabled
and
optgroup
disabled
|
aria-disabled="true"
|
Use the
Authors MAY use the
Authors SHOULD NOT use
Authors MUST NOT use |
Any element where the
placeholder
attribute is allowed
|
aria-placeholder="..."
|
Use the
Authors MAY use the
Authors MUST NOT use the |
Any element where the max attribute is allowed: meter
max
, progress
max
, and input
max
|
aria-valuemax="..."
|
Use the
Authors MAY use the
Authors SHOULD NOT use
Authors MUST NOT use |
Any element where the min attribute is allowed: meter
min
and input
min
|
aria-valuemin="..."
|
Use the
Authors MAY use the
Authors SHOULD NOT use
Authors MUST NOT use |
Any element which allows the readonly attribute:
input
readonly
, textarea
readonly
and form-associated custom element which allows
readonly
|
aria-readonly="true"
|
Use the
Authors MAY use the
Authors SHOULD NOT use the
Authors MUST NOT use |
|
Element with
Note
This is equivalent to the
|
aria-readonly="false"
|
Authors MUST NOT set aria-readonly="true" on an element that has isContentEditable="true".
|
Any element where the required attribute is allowed: input
required
, textarea
required
, and select
required
|
aria-required="true"
|
Use the
Authors MAY use the
Authors SHOULD NOT use the
Authors MUST NOT use |
Any element where the
colspan
attribute is allowed: td and th
|
aria-colspan="..."
|
Use the
Authors SHOULD NOT use the
Authors MUST NOT use |
Any element where the
rowspan
attribute is allowed:
td and th
|
aria-rowspan="..."
|
Use the
Authors SHOULD NOT use the
Authors MUST NOT use |
The ARIA Specification's Deprecated Requirements section indicates that if an ARIA feature is marked as deprecated then authors are advised not to use said feature for new content.
The following roles and attributes are deprecated features of ARIA and DPub ARIA. Conformance checkers MUST warn authors about the deprecated status of these features. Whenever possible, authors are advised to use alternatives to deprecated features.
The directory role is marked for deprecation in
WAI-ARIA 1.2
. In reality, the directory role had no functional difference to an element with an implicit or explicit list role. Authors are advised to use one of HTML's native list elements, or an ARIA list instead.
The doc-biblioentry and doc-endnote roles are marked for deprecation in
Digital Publishing WAI-ARIA Module 1.1
, as they are not valid children for an element with an implicit or explicit role of list. Authors can use standard list and child li elements without the need for these roles.
The aria-dropeffect and aria-grabbed attributes were deprecated in
WAI-ARIA 1.1
. There is presently no feature in ARIA to replace their proposed functionality.
Authors SHOULD use ASCII lowercase for all role token values
and any state or property attributes (aria-*) whose values are
defined as tokens.
While modern browsers treat the role or aria-* attribute values as ASCII case-insensitive, not all assistive technologies will correctly parse these values.
To reduce interoperability issues, authors are strongly encouraged to use ASCII lowercase for aria-* and role attribute values. Further, authors are encouraged to rigorously test with different browser and assistive technology combinations to ensure that their content will be correctly exposed to their users.
This section is non-normative.
The following table maps (and extends) the Kinds of content and allowed descendant
information (defined in the
[
HTML
] specification) to elements that have an equivalent role.
Column 1 links to the normative
Accessible Rich Internet Applications (WAI-ARIA) 1.2
definitions for each ARIA role.
Column 2 identifies the Kinds of content
categories each role has when it is used on an HTML element.
Column 3 indicates what kinds of HTML elements can be descendants of
an element with an explicit role specified, often matching the HTML element with
the same implicit role.
For example, a
button
element has an implicit role=button.
In HTML a button element allows phrasing content as descendants, and does not allow interactive content
or descendants with a tabindex attribute. Therefore, any elements specified with a role=button would follow
the same descendant restrictions, and not allow any interactive content descendants,
elements with a tabindex specified, or any elements with role values
that are in the interactive content category (identified in column 3).
<!-- conformance checkers will report an error -->
<button>
<div role="button">...</div>
</button>
<div role="button">
<button>...</button>
</div>
<div role="link">
<textarea>...</textarea>
</div>
Additionally, there are certain roles which Accessible Rich Internet Applications (WAI-ARIA) 1.2 has specified specific requirements for their allowed descendants. These have been identified in column 3 (Descendant allowances) by indicating to "Refer to the 'Required Owned Elements'" for those particular roles.
| Role | Kind of content | Descendant allowances |
|---|---|---|
alert
|
Flow content | Flow content but with no main element descendants. |
alertdialog
|
Flow content | Flow content |
application
|
Flow content | Flow content |
article
|
Flow content but with no main element descendants. | |
banner
|
Flow content but with no main, header, or footer element descendants. | |
blockquote
|
Flow content but with no main element descendants. | |
button
|
Phrasing content, but with no
interactive content descendants, and no descendants with a tabindex attribute specified.
|
|
caption
|
N/A | Flow content but with no main or table element descendants. |
cell
|
N/A | Flow content but with no main element descendants. |
checkbox
|
Phrasing content, but with no
interactive content descendants, and no descendants with a tabindex attribute specified.
|
|
code
|
Phrasing content | |
columnheader
|
N/A | Flow content but with no main, header, or footer element descendants. |
combobox
|
Flow content but with no main element descendants. | |
complementary
|
Flow content but with no main element descendants. | |
contentinfo
|
Flow content but with no main, header, or footer element descendants. | |
definition
|
Phrasing content | |
deletion
|
Phrasing content | |
dialog
|
Flow content | Flow content |
directory
|
Flow content | Flow content but with no main element descendants. |
document
|
Flow content | Flow content |
emphasis
|
Phrasing content | |
feed
|
Flow content | Flow content but with no main element descendants. |
figure
|
Flow content but with no main element descendants. | |
form
|
Flow content, but with no
form
element descendants.
|
|
generic
|
Flow content | |
grid
|
Refer to the "Required Owned Elements" as defined for the ARIA
grid
role.
|
|
gridcell
|
Interactive content | Flow content but with no main element descendants. |
group
|
Flow content | |
heading
|
Phrasing content | |
img
|
Phrasing content, but with no interactive content descendants. | |
insertion
|
Phrasing content | |
link
|
Flow content, but with no interactive content descendants, and no descendants with a tabindex attribute specified.
|
|
list
|
Flow content |
Refer to the "Required Owned Elements" as defined for the ARIA
list
role.
|
listbox
|
Refer to the "Required Owned Elements" as defined for the ARIA
listbox
role.
|
|
listitem
|
N/A | Flow content but with no main element descendants. |
log
|
Flow content | Flow content, but with no main element descendants. |
main
|
Flow content | Flow content, but with no main element descendants. |
marquee
|
Flow content | Flow content, but with no main element descendants. |
math
|
Flow content | Flow content |
menu
|
Refer to the "Required Owned Elements" as defined for the ARIA
menu
role.
|
|
menubar
|
Refer to the "Required Owned Elements" as defined for the ARIA
menubar
role.
|
|
menuitem
|
Interactive content |
Phrasing content, but with no
interactive content descendants, and no descendants with a tabindex attribute specified.
|
menuitemcheckbox
|
Interactive content |
Phrasing content, but with no
interactive content descendants, and no descendants with a tabindex attribute specified.
|
menuitemradio
|
Interactive content |
Phrasing content, but with no
interactive content descendants, and no descendants with a tabindex attribute specified.
|
meter
|
Phrasing content, but with no meter element descendants. | |
navigation
|
Flow content, but with no main element descendants. | |
none
|
N/A | Transparent |
note
|
Flow content | Flow content, but with no main element descendants. |
option
|
Interactive content |
Phrasing content, but with no
interactive content descendants, and no descendants with a tabindex attribute specified.
|
paragraph
|
Phrasing content | |
presentation
|
N/A | Transparent |
progressbar
|
Phrasing content, but with no progress element descendants. | |
radio
|
Phrasing content, but with no
interactive content descendants, and no descendants with a tabindex attribute specified.
|
|
radiogroup
|
Flow content | |
region
|
Flow content, but with no main element descendants. | |
row
|
N/A |
Refer to the "Required Owned Elements" as defined for the ARIA
row
role.
|
rowgroup
|
N/A |
Refer to the "Required Owned Elements" as defined for the ARIA
rowgroup
role.
|
rowheader
|
N/A | Flow content but with no main element descendants. |
scrollbar
|
Interactive content | Phrasing content |
search
|
Flow content but with no main element descendants. | |
searchbox
|
Flow content but with no main element descendants. | |
separator
|
Interactive content (if focusable) | Phrasing content |
slider
|
Phrasing content | |
spinbutton
|
Flow content but with no main element descendants. | |
status
|
Flow content | Flow content but with no main element descendants. |
strong
|
Phrasing content | |
subscript
|
Phrasing content | |
superscript
|
Phrasing content | |
switch
|
Phrasing content, but with no
interactive content descendants, and no descendants with a tabindex attribute specified.
|
|
tab
|
Interactive content |
Phrasing content, but with no
interactive content descendants, and no descendants with a tabindex attribute specified.
|
table
|
Refer to the "Required Owned Elements" as defined for the ARIA
table
role.
|
|
tablist
|
Refer to the "Required Owned Elements" as defined for the ARIA
tablist
role.
|
|
tabpanel
|
Flow content | Flow content |
term
|
Phrasing content | Phrasing content |
textbox
|
Interactive content | Flow content but with no main element descendants. |
time
|
Phrasing content | |
timer
|
Flow content | Flow content but with no main element descendants. |
toolbar
|
Flow content | Flow content but with no main element descendants. |
tooltip
|
Flow content | Phrasing content |
tree
|
Flow content |
Refer to the "Required Owned Elements" as defined for the ARIA
tree
role.
|
treegrid
|
Flow content |
Refer to the "Required Owned Elements" as defined for the ARIA
treegrid
role.
|
treeitem
|
Interactive content | Phrasing content |
As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.
The key words MAY, MUST, MUST NOT, NOT RECOMMENDED, SHOULD, and SHOULD NOT in this document are to be interpreted as described in BCP 14 [ RFC2119 ] [ RFC8174 ] when, and only when, they appear in all capitals, as shown here.
Conformance checkers that claim support for checking ARIA in HTML documents
MUST implement checks for the conformance requirements for use of the ARIA role
and aria-* attributes on HTML elements as defined in this specification.
A conforming document MUST NOT contain any elements with author defined role
or aria-* attributes with values other than those which, per this specification,
authors MAY use on each HTML element in
4.
Document conformance requirements for use of ARIA attributes in HTML.
Conformance checkers SHOULD flag instances where authors are explicitly providing
an element with a role which matches its
implicit ARIA semantics as failures,
as it is NOT RECOMMENDED for authors to explicitly set these roles.
A conformance checker MAY define their own terminology, and level or levels of severity, when surfacing document failures to conform to this specification.
This section is non-normative.
This specification does not define the features of [ wai-aria-1.2 ], [ dpub-aria-1.0 ] or [ HTML ]. Rather it provides rules and guidance for conformance checkers that claim support for checking ARIA in HTML, as well as providing guidance to authors.
Therefore, there are no known privacy or security impacts of this specification, as it defines no new features to introduce potential concern.
참조 항목:
Referenced in:
Referenced in:
Referenced in: